// pages/components/commentlist/commentlist.js
const util = require("../../../utils/util")
const computedBehavior = require('miniprogram-computed').behavior

// 必须设置默认值,如此点击回复才能插入二级
let isComtIndex_s = 0
let isComtIndex = 0
let isComtRow = {}
let isComtRow_s = {}

Component({
    behaviors: [computedBehavior],
    /**
     * 组件的属性列表
     */
    properties: {
        list: {
            type: Array,
            // value: (data) => {
            //     console.log(data);
            //     return []
            // }
        },
        modelValue: {
            type: String,
            value: ''
        },
        isDoctor: {
            type: Boolean,
            value: false
        },
        themeColor: {
            type: String,
            value: '#1DBFB6'
        },
        keyNames: {
            type: Object,
            value: {
                // 一级评论相关
                id: 'id', // 评论id
                user_id: 'user_id', // 用户id
                user_name: 'user_name', // 用户名
                user_avatar: 'user_avatar', // 用户头像
                user_content: 'user_content', // 用户评论内容
                user_date: 'user_date', // 用户评论时间
                user_is_like: 'user_is_like', // 用户是否点赞
                user_like_num: 'user_like_num', // 用户点赞数
                isLoading: 'isLoading', // 是否显示加载中
                allReply: 'allReply', // 评论总数
                isMyComment: 'isMyComment', // 是否是自己的评论
                // 二级评论相关
                user_reply_list: 'user_reply_list',  // 回复列表
                user_reply_id: 'user_reply_id', // 回复人id
                user_reply_name: 'user_reply_name', // 回复人名字
                user_reply_avatar: 'user_reply_avatar', // 回复人头像
                user_reply_content: 'user_reply_content', // 回复 内容
                user_reply_date: 'user_reply_date', // 回复 时间
                user_reply_is_like: 'user_reply_is_like', // 回复人是否点赞
                user_reply_like_num: 'user_reply_like_num', // 回复人点赞数
                pid: 'pid',
                user_isMyComment: 'user_isMyComment', // 是否是自己的评论
                to_user_name: 'to_user_name', // 被回复人名字
                to_user_id: 'to_user_id', // 被回复人id
            }

        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        // 评论列表数组
        commentList: [],

        // 输入弹出框标识
        inpVisible: false,

        // 输入框焦点聚集标识
        comtIptFocusStatus: false,

        // 输入框的默认值
        placeholder: '',

        // 输入框内容
        inputVal: '',

        isLoading: false,

        positionStauts: 'relative',
        keyboardheight: 0

    },

    watch: {
        // 必须用watch实时更换评论列表内容
        // 用计算属性会影响删除功能，commentList变更会触发改方法，陷入死循环
        'list': function (list) {
            // 注意： computed 函数中不能访问 this ，只有 data 对象可供访问
            // 这个函数的返回值会被设置到 this.data.sum 字段中
            let commentList = this.data.commentList
            if (list.length == 1) {
                let newItem = {
                    id: list[0]['id'],
                    name: list[0]['user_name'],
                    url: list[0]['user_avatar'],
                    contentText: list[0]['user_content'],
                    date: list[0]['user_date'],
                    isLike: list[0]['user_is_like'],
                    likeNum: list[0]['user_like_num'],
                    isLoading: list[0]['isLoading'],
                    allReply: list[0]['allReply'],
                    isMyComment: list[0]['isMyComment'],
                    page: list[0]['page'],
                    noMore: list[0]['noMore'],
                    img_array: list[0]['img_array'],
                    replyList: list[0]['user_reply_list'].map((item_s) => {
                        return {
                            id: item_s['user_reply_id'],
                            pid: item_s['pid'],
                            name: item_s['user_reply_name'],
                            url: item_s['user_reply_avatar'],
                            contentStr: item_s['user_reply_content'],
                            date: item_s['user_reply_date'],
                            isLike: item_s['user_reply_is_like'],
                            likeNum: item_s['user_reply_like_num'],
                            to_user_name: item_s['to_user_name'],
                            to_user_id: item_s['to_user_id'],
                            user_isMyComment: item_s['user_isMyComment'],
                        }
                    })
                }
                // let copyList = [...commentList]
                commentList.unshift(newItem)

                // console.log(copyList);
                // commentList = copyList
                // return
            } else if (list.length > 1) {
                console.log('list', list);
                commentList = list.map((item) => {
                    return {
                        id: item['id'],
                        name: item['user_name'],
                        url: item['user_avatar'],
                        contentText: item['user_content'],
                        date: item['user_date'],
                        isLike: item['user_is_like'],
                        likeNum: item['user_like_num'],
                        isLoading: item['isLoading'],
                        allReply: item['allReply'],
                        isMyComment: item['isMyComment'],
                        page: item['page'],
                        noMore: item['noMore'],
                        img_array: item['img_array'],
                        replyList: item['user_reply_list'].map((item_s) => {
                            return {
                                id: item_s['user_reply_id'],
                                pid: item_s['pid'],
                                name: item_s['user_reply_name'],
                                url: item_s['user_reply_avatar'],
                                contentStr: item_s['user_reply_content'],
                                date: item_s['user_reply_date'],
                                isLike: item_s['user_reply_is_like'],
                                likeNum: item_s['user_reply_like_num'],
                                to_user_name: item_s['to_user_name'],
                                to_user_id: item_s['to_user_id'],
                                user_isMyComment: item_s['user_isMyComment'],
                            }
                        })
                    }
                })
            } else return

            this.setData({
                commentList: commentList
            })
        },

    },

    /**
     * 组件的方法列表
     */
    methods: {

        // 点击查看图片
        checkIMG(e) {
            let current = e.currentTarget.dataset.cururl
            let qindex = e.currentTarget.dataset.qindex
            let questionItem = this.data.commentList[qindex]
            // console.log(current, questionItem);
            wx.previewImage({
                current: current, // 当前显示图片的http链接
                urls: questionItem.img_array,// 需要预览的图片http链接列表
                fail: function (err) {
                    // console.log('失败', err);
                },
                success: function (res) {
                    // console.log('成功', res);
                },
            })
        },

        // 以下两个方法解决键盘部分遮挡输入框事件
        // input组件 keyboardheightchange事件失效，不用
        // focus事件亦可以获取键盘高度，但需blur事件配合复原
        // adjust- position="{{false}}"聚焦禁止上推动屏幕
        keyboardheightchange(e) {
            let keyboardheight = e?.detail?.height || 0
            // console.log(keyboardheight);

            this.setData({
                positionStauts: keyboardheight == 0 ? 'relative' : 'fixed',
                keyboardheight: keyboardheight
            })
        },

        handleBlur() {
            this.setData({
                positionStauts: 'relative',
                keyboardheight: 0
            })
        },

        /**
         * 弹框change事件
         */
        onChangePop(e) {
            // console.log(e);
            let flag = e.detail.visible
            // console.log(flag);
            // return
            this.setData({
                comtIptFocusStatus: flag,
                inpVisible: flag
            })
        },

        /**
         * 输入框内容改变 => 更新v-model
         */
        onChangeIput(e) {
            // console.log(e);
            this.triggerEvent('updateValue', e)
        },

        /**
        * 回复评论弹框
        * @param index  一级评论索引
        * @param row   一级评论信息
        * @param j  二级评论索引
        * @param row_s 二级评论信息
        */
        showRevertPop(e) {
            // index, row, j, row_s
            let index = e.currentTarget.dataset.index
            let row = e.currentTarget.dataset.row
            let j = e.currentTarget.dataset.j
            let row_s = e.currentTarget.dataset.row_s

            // console.log(index, row, j, row_s);
            // console.log('进入', isComtIndex_s);

            // return

            isComtIndex = index // 保存当前评论,发送评论时使用
            // console.log('isComtIndex', isComtIndex);
            isComtRow = { // 保存当前评论,发送评论时使用
                id: row.id,
                name: row.name,
                url: row.url,
                contentText: row.contentText,
                date: row.date,
                isLike: row.isLike,
                likeNum: row.likeNum,
                allReply: row.allReply,
                isMyComment: row.isMyComment,
            }
            if (j !== undefined) {
                isComtIndex_s = j // 保存当前评论,发送评论时使用
            }
            if (row_s !== undefined) {
                isComtRow_s = {
                    id: row_s.id,
                    pid: row_s.pid,
                    name: row_s.name,
                    url: row_s.url,
                    contentStr: row_s.contentStr,
                    date: row_s.date,
                    isLike: row_s.isLike,
                    likeNum: row_s.likeNum,
                    user_isMyComment: row_s.user_isMyComment,
                }
            }

            let placeholder = `回复 @${j !== undefined ? row_s.name : row.name}`
            this.setData({
                inpVisible: true,
                comtIptFocusStatus: true,
                placeholder: placeholder
            })
        },

        /**
         * 收起回复
         */
        closetoAllReply(e) {
            let index = e.currentTarget.dataset.index
            let hidelist = this.data.commentList[index].replyList
            let changeStr = `commentList[${index}].replyList`
            let hideStr = `commentList[${index}].hideList`
            this.setData({
                [changeStr]: [],
                // 将加载完的所有回复保存到另一个属性，展开时不必再发请求，直接调取展示
                [hideStr]: hidelist
            })
        },


        /**
         * 发送评论
         */
        sendComment(e) {
            /**
             * @argument index 一级评论索引
             * @argument row 一级评论信息
             * @argument index_s 二级评论索引
             * @argument row_s 二级评论信息
             * @callback ()=>{} 发送评论接口成功之后 调用sendComment的第二个形参 该形参为方法，更新组件内的评论列表
             */

            let currentCommet = {
                index: isComtIndex,
                row: isComtRow,
                index_s: isComtIndex_s,
                row_s: isComtRow_s,
            }

            // console.log('currentCommet', currentCommet);
            // return

            let callback = (data) => {
                let commentList = this.data.commentList
                commentList[isComtIndex].allReply += 1

                // console.log('this.isComtIndex_s', isComtIndex_s);
                if (isComtIndex_s !== undefined) {
                    commentList[isComtIndex].replyList.unshift({ ...data, user_isMyComment: true })
                } else {
                    commentList.unshift({ ...data, isMyComment: true })
                }
                // console.log('new', commentList);
                this.setData({
                    commentList: commentList
                })
                // close()

                this.setData({
                    // 隐藏输入框
                    inpVisible: false,
                    // 清空输入框内容
                    inputVal: ''
                })

                // 恢复默认值
                isComtIndex_s = 0
                isComtIndex = 0
                isComtRow = {}
                isComtRow_s = {}
            }

            e.data = currentCommet
            e.callback = callback
            this.triggerEvent('sendComment', e)
        },

        /**
         * 展开更多评论
         * @param index 一级评论索引
         */
        showAllReply(e) {
            let index = e.currentTarget.dataset.index
            let row = e.currentTarget.dataset.row

            // commentList.value[index].isLoading = true; // 显示加载中
            let loadStr = `commentList[${index}].isLoading`
            this.setData({
                [loadStr]: true
            })
            console.log(index, row);
            e.data = { index, row }
            e.callback = (data) => {
                let newData = null;
                let commentList = this.data.commentList
                console.log(commentList);
                if (commentList[index].noMore) {
                    commentList[index].replyList.push(...data);
                }
                else if (Array.isArray(data) && data.length) {
                    // console.log(data);
                    newData = data.map((item) => {
                        return {
                            id: item[this.data.keyNames.user_reply_id],
                            pid: item[this.data.keyNames.pid],
                            name: item[this.data.keyNames.user_reply_name],
                            url: item[this.data.keyNames.user_reply_avatar],
                            contentStr: item[this.data.keyNames.user_reply_content],
                            date: item[this.data.keyNames.user_reply_date],
                            isLike: item[this.data.keyNames.user_reply_is_like],
                            likeNum: item[this.data.keyNames.user_reply_like_num],
                            to_user_id: item[this.data.keyNames.to_user_id],
                            to_user_name: item[this.data.keyNames.to_user_name],
                            user_isMyComment: item[this.data.keyNames.user_isMyComment],
                        };
                    });
                    console.log('1', newData);
                    commentList[index].page = commentList[index].page + 1;
                    commentList[index].replyList.push(...newData);
                    commentList[index].noMore = commentList[index].replyList.length >= commentList[index].allReply ? true : false;

                    // 真实数据是不能操作每条评论的子评论数据的
                    // commentList[index].allReply += data.length 
                    console.log('commentList[index].page', commentList[index].page);
                } else {
                    newData = {
                        id: item[this.data.keyNames.user_reply_id],
                        pid: item[this.data.keyNames.pid],
                        name: item[this.data.keyNames.user_reply_name],
                        url: item[this.data.keyNames.user_reply_avatar],
                        contentStr: item[this.data.keyNames.user_reply_content],
                        date: item[this.data.keyNames.user_reply_date],
                        isLike: item[this.data.keyNames.user_reply_is_like],
                        likeNum: item[this.data.keyNames.user_reply_like_num],
                        to_user_id: item[this.data.keyNames.to_user_id],
                        to_user_name: item[this.data.keyNames.to_user_name],
                        user_isMyComment: item[this.data.keyNames.user_isMyComment],
                    };
                    console.log('2', newData);

                    commentList[index].replyList.push(newData);
                    // commentList[index].allReply += 1
                }
                this.setData({
                    commentList: commentList,
                    [loadStr]: false
                })
                console.log(this.data.commentList);
                // commentList.value[index].isLoading = false; // 关闭加载中
            }

            this.triggerEvent('getMore', e)
        },

        /**
         * 点赞
         * @param index 一级评论索引
         * @param j 二级评论索引
         * ()=>{} 点在接口成功之后 调用getLike的第二个形参 该形参为方法，更新组件内的点赞样式
         */
        getLike(e) {

            let index = e.currentTarget.dataset.index
            let j = e.currentTarget.dataset.j

            let index_id, j_id, j_Like, index_Like
            if (j !== undefined) {
                j_id = this.data.commentList[index].replyList[j].id
                j_Like = this.data.commentList[index].replyList[j].isLike

            } else {
                index_id = this.data.commentList[index].id
                index_Like = this.data.commentList[index].isLike
            }
            e.data = { index: { num: index, id: index_id, like: index_Like }, j: { num: j, id: j_id, like: j_Like } }
            e.callback = () => {
                if (j !== undefined) {
                    let LikeFlag = !this.data.commentList[index].replyList[j].isLike
                    let LikeNum = this.data.commentList[index].replyList[j].likeNum

                    let likeStr = `commentList[${index}].replyList[${j}].isLike`
                    let numStr = `commentList[${index}].replyList[${j}].likeNum`

                    this.setData({
                        [likeStr]: LikeFlag,
                        [numStr]: LikeFlag ? LikeNum + 1 : LikeNum - 1
                    })

                    // commentList.value[index].replyList[j].isLike =
                    //     !commentList.value[index].replyList[j].isLike;
                    // if (commentList.value[index].replyList[j].isLike == true) {
                    //     commentList.value[index].replyList[j].likeNum++;
                    // } else {
                    //     commentList.value[index].replyList[j].likeNum--;
                    // }
                } else {
                    let LikeFlag = !this.data.commentList[index].isLike
                    let LikeNum = this.data.commentList[index].likeNum

                    let likeStr = `commentList[${index}].isLike`
                    let numStr = `commentList[${index}].likeNum`

                    this.setData({
                        [likeStr]: LikeFlag,
                        [numStr]: LikeFlag ? LikeNum + 1 : LikeNum - 1
                    })

                    // commentList.value[index].isLike = !commentList.value[index].isLike;
                    // if (commentList.value[index].isLike == true) {
                    //     commentList.value[index].likeNum++;
                    // } else {
                    //     commentList.value[index].likeNum--;
                    // }
                }
            }
            this.triggerEvent('getLike', e)
        },

        /**
         * 删除评论
         * @param index  一级评论索引
         * @param row   一级评论信息
         * @param j  二级评论索引
         * @param row_s 二级评论信息
         */
        removeRevertModal(e) {
            const that = this
            let index = e.currentTarget.dataset.index
            let row = e.currentTarget.dataset.row
            let j = e.currentTarget.dataset.j
            let row_s = e.currentTarget.dataset.row_s

            wx.showModal({
                title: '提示',
                content: j === undefined ? "确定删除该评论吗？" : "确定删除该回复吗？",
                showCancel: true,
                confirmText: '删除',
                success(res) {
                    if (res.confirm) {
                        e.data = {
                            index,
                            row,
                            j,
                            row_s,
                        }
                        e.callback = () => {
                            if (j !== undefined) {
                                let replyList = that.data.commentList[index].replyList
                                let ListStr = `commentList[${index}].replyList`
                                let num = that.data.commentList[index].allReply
                                let numStr = `commentList[${index}].allReply`

                                // console.log(replyList);
                                replyList.splice(j, 1)
                                // console.log(replyList);

                                that.setData({
                                    [ListStr]: replyList,
                                    [numStr]: num - 1
                                })

                                return
                                // commentList.value[index].replyList.splice(j, 1);
                                // commentList.value[index].allReply--;
                            } else {
                                let commentList = that.data.commentList

                                // console.log(commentList);
                                commentList.splice(index, 1)
                                // console.log(commentList);

                                that.setData({
                                    commentList: commentList
                                })

                                if (commentList.length == 0) {
                                    // 通知父组件设置评论空状态
                                    that.triggerEvent('setEmptyStatus', e)
                                }
                                return
                                // commentList.value.splice(index, 1);
                            }
                        }

                        that.triggerEvent('remove', e)


                    } else if (res.cancel) {
                        util.showToast('已取消')
                    }
                }
            })
        }
    },

    // 只有 attached中可以拿到 data和properties中数据，只需this.data.
    // 当组件被添加到页面节点树时，会触发attached生命周期函数。一般用于执行一些组件加载和渲染的操作
    attached: function () {
        // let commentList = []
        // commentList = this.data.list.map((item) => {
        //     return {
        //         id: item['id'],
        //         name: item['user_name'],
        //         url: item['user_avatar'],
        //         contentText: item['user_content'],
        //         date: item['user_date'],
        //         isLike: item['user_is_like'],
        //         likeNum: item['user_like_num'],
        //         isLoading: item['isLoading'],
        //         allReply: item['allReply'],
        //         isMyComment: item['isMyComment'],
        //         replyList: item['user_reply_list'].map((item_s) => {
        //             return {
        //                 id: item_s['user_reply_id'],
        //                 pid: item_s['pid'],
        //                 name: item_s['user_reply_name'],
        //                 url: item_s['user_reply_avatar'],
        //                 contentStr: item_s['user_reply_content'],
        //                 date: item_s['user_reply_date'],
        //                 isLike: item_s['user_reply_is_like'],
        //                 likeNum: item_s['user_reply_like_num'],
        //                 to_user_name: item_s['to_user_name'],
        //                 to_user_id: item_s['to_user_id'],
        //                 user_isMyComment: item_s['user_isMyComment'],
        //             }
        //         })
        //     }
        // })
        // // console.log('commentList', commentList);
        // this.setData({
        //     commentList: commentList
        // })
    },

    // 当组件实例被创建时，会触发created生命周期函数。在这个阶段，可以进行一些组件实例的初始化操作。
    created: function () {
        // 组件被添加到页面节点树时触发
        // 执行一些组件加载和渲染的操作
    },

    // 当组件初次渲染完成时，会触发ready生命周期函数。一般用于执行一些只能在组件初次渲染完成后才能进行的操作。
    ready: function () {
        // 组件初次渲染完成时触发
        // 执行一些只能在组件初次渲染完成后才能进行的操作
    },

    // 当组件被从页面节点树移除时，会触发detached生命周期函数。一般用于执行一些组件卸载和清理的操作。
    detached: function () {
        // 组件被从页面节点树移除时触发
        // 执行一些组件卸载和清理的操作
    }
})